import React, { useState, useRef, useEffect } from 'react';
import { Card, Row, Space, Menu, Button, Col, Tooltip, Dropdown, Modal, Input } from 'antd'
import { connect, history } from 'umi'
import { ChromeOutlined, SettingOutlined, } from '@ant-design/icons'
import { KeepAlive, useAliveController, AliveScope } from 'react-activation';
import { setString } from '@/utils/utils'
import './index.less';
const AnsweringItem = (props) => {
    const { val, dispatch, } = props
    const { title } = val
    return <Tooltip placement="right" title={title}>
        <div onClick={() => {
            dispatch({
                type: 'answering/save',
                payload: {
                    aiChatData: val,
                    prompt: val.title
                }
            })
            history.push({
                pathname: '/answering/answer',
                query: {
                    type: 'edit',
                    id: val.id,
                    prompt: val.title
                }
            })
        }} className='AnsweringAis_flowautoData font_hide'>
            {title}
        </div>
    </Tooltip>
}
const AnsweringItemSelect = (props) => {
    const [editFlag, setEditFlag] = useState(false)
    const { val, dispatch, reload } = props
    const { title } = val
    const items = [
        {
            key: '1',
            label: <Button onClick={() => { setEditFlag(true) }} type='link'>重命名</Button>,
        },
        {
            key: '2',
            label: <Button onClick={() => {
                Modal.confirm({
                    title: '确认删除',
                    content: '是否要删除搜索问题',
                    okText: '删除',
                    cancelText: '取消',
                    onOk() {
                        dispatch({
                            type: 'answering/fakeRemoveChatTitle',
                            payload: {
                                id: val.id
                            },
                            callback: () => {
                                reload()
                            }
                        })
                    },
                    onCancel() {
                        console.log('Cancel');
                    },
                })
            }} type='link'>删除</Button>,
        },

    ];
    const reRame = (e) => {
        dispatch({
            type: 'answering/fakeRenameChatTitle',
            payload: {
                id: val.id,
                title: e.target.value,
            },
            callback: () => {
                setEditFlag(false)
                reload()
            }
        })
    }
    return <Space>
        <div className='AnsweringAis_flowautoData AnsweringAis_flowautoColor2 font_hide'>
            {editFlag === true ? <Input
                onPressEnter={(e) => {
                    reRame(e)
                }}
                defaultValue={title}></Input> : <Space>
                <Tooltip placement="right" title={title}>
                    <div className='font_hide' style={{ width: 180 }}>
                        {title}
                    </div>
                </Tooltip>
                <Dropdown
                    menu={{
                        items,
                    }}
                    placement="bottomLeft"
                >
                    <SettingOutlined></SettingOutlined>
                </Dropdown>

            </Space>}
        </div>

    </Space>



}
const AnsweringAi = (props) => {
    const { dispatch, loading, children, list, data, } = props
    const { location } = history
    const { pathname, query } = location;
    const { onlyId = '' } = query
    useEffect(() => {
        fetchData()
    }, [])
    const fetchData = () => {
        dispatch({
            type: 'answering/fetchListMyChatTitle',
            payload: {},
        })
    }
    useEffect(() => {
        const unblock = history.listen((location, action) => {
            if (action === 'PUSH') {
                const { pathname, query } = location;
                if (pathname === '/marketingModule/promoter') {
                    return null
                }
                else {
                    history.replace({
                        pathname: pathname,
                        query: {
                            ...query,
                            onlyId: setString(true, 7, 8)
                        }
                    });
                }

            }
            // 返回一个字符串来显示给用户的提示信息，如果不返回任何值，则不会显示提示信息
        });

        return () => {
            unblock();
        };
    }, []);
    console.log(data)
    return (
        <AliveScope>
            <div className='AnsweringAis_box'>
                <div className='AnsweringAis_left_box'>
                    <div className='AnsweringAis_left_content'>
                        <div className='AnsweringAis_left_title'>
                            学管家AI助手
                        </div>
                        <div className='AnsweringAis_left_btn'>
                            <div onClick={() => {
                                dispatch({
                                    type: 'answering/save',
                                    payload: {
                                        aiChatData: {}
                                    },
                                })
                                history.push({
                                    pathname: '/answering/ask',
                                    query: {

                                    }
                                })
                            }} className='AnsweringAis_left_btnStyle'>
                                <div className='AnsweringAis_left_btn1'>
                                    <div className='AnsweringAis_icon_style'>
                                        <ChromeOutlined></ChromeOutlined>
                                    </div>

                                    开启新对话
                                </div>
                            </div>
                        </div>
                        <div className='AnsweringAis_flowauto'>
                            {list.map((item, index) => {
                                const {
                                    time,
                                    chatTitleList
                                } = item
                                return <div key={index} className='AnsweringAis_flowautoItem'>
                                    <div className='AnsweringAis_flowautoDate'>
                                        {time}
                                    </div>
                                    {chatTitleList.map((val, o) => {
                                        const { title } = val
                                        if (data.id == val.id) {
                                            return <AnsweringItemSelect key={o} reload={fetchData} val={val} dispatch={dispatch} data={data}></AnsweringItemSelect>
                                        }
                                        return <AnsweringItem key={o} val={val} dispatch={dispatch} data={data}></AnsweringItem>
                                    })}
                                </div>
                            })}
                        </div>
                    </div>
                </div>
                <div className='AnsweringAis_left_rightBox'>
                    <KeepAlive
                        when={() => {
                            // 根据路由的前进和后退状态去判断页面是否需要缓存，前进时缓存，后退时不缓存（卸载）。 when中的代码是在页面离开（卸载）时触发的。
                            return history.action != 'POP'; //true卸载时缓存，false卸载时不缓存
                        }}
                        cacheKey={onlyId}
                        id={pathname + onlyId} // 缓存多个页面时要有id
                        name={pathname} // 页面的path地址
                        saveScrollPosition={false} // 可以记住页面的滚动位置,切换页面是回到上一次滚动的位置,可以设置为false
                    >
                        {onlyId ? children : null}
                    </KeepAlive>
                </div>
            </div>
        </AliveScope>


    );
};

export default connect(({ loading, answering }) => ({
    list: answering.dateAiChatTitleList,
    data: answering.aiChatData,
    loading: loading.models.answering,
}))(AnsweringAi);

